<template>
  <el-container>
    <el-dialog
      title="评价"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="评语">
          <el-input v-model="form.context" placeholder="请输入评语"></el-input>
        </el-form-item>
        <el-upload
          class="upload-demo"
          action="http://192.168.100:8087/flowerMall/goods/uploadApp"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="success"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传图片</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="pingjia">确 定</el-button>
      </span>
    </el-dialog>
    <el-header>
      <top-bar></top-bar>
      <div class="search-box">
        <div class="search-title">
          <span>Huahui 花卉网</span>
          <span>-花之思 只为你-</span>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="700"
        :stripe="true"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="expand" width="100%">
          <template slot-scope="props">
            <el-table
              ref="multipleTable"
              :data="props.row.context"
              tooltip-effect="dark"
              style="width: 100%"
              :stripe="true"
            >
              <el-table-column
                label="商品名称"
                width="220"
                prop="goodsName"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="商品图片"
                width="220"
                prop="img"
                align="center"
              >
                <template slot-scope="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.img"
                    fit="contain"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column
                label="数量"
                width="120"
                prop="num"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="价格"
                width="120"
                prop="price"
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <el-button type="primary" @click="lookDetail(scope.row)">查看</el-button>
                  <el-button :disabled="props.row.orderType != 3" type="success" @click="evaluation(scope.row)">评价</el-button>
                  <!-- <el-button type="success" @click="evaluation(scope.row)">评价</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          label="快递单号"
          prop="expressNumber"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="totalPrice"
          label="总价"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="orderType"
          label="订单状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderType == 1" type="success">待发货</el-tag>
            <el-tag v-if="scope.row.orderType == 2" type="success">已发货</el-tag>
            <el-tag v-if="scope.row.orderType == 3" type="success">完成订单</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button v-if="scope.row.orderType == 2" type="primary" @click="sure(scope.row)">确认收货</el-button>
            <el-button :disabled="scope.row.orderType != 3" type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="10"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import topBar from '../../components/topBar/index.vue'
export default {
  name: 'Order',
  components: {
    topBar
  },
  data() {
    return {
      multipleSelection: [],
      total: 0, // 总页数
      page: 1, // 当前页
      tableData: [],
      userInfo: {},
      dialogVisible: false,
      form: {},
      fileList: [],
      pic: [],
      goodsId: ''
    }
  },
  created() {
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
    this.getList()
  },
  methods: {
    sure(item) {
      console.log(item)
      this.$api.order.changeStatus({ orderId: item.id, orderType: '3' })
        .then(res => {
          console.log(res)
          if (res.data.state == 200) {
            this.$message.success('确认收货成功')
            this.getList()
          }
        })
    },
    // 评价
    pingjia() {
      this.form.goodsId = this.goodsId
      this.form.userId = this.userInfo.id
      this.form.pic = this.pic
      this.$api.order.saveMessage(this.form)
        .then(res => {
          console.log(res)
          if (res.data.state == 200) {
            this.$message.success('评价成功')
            this.dialogVisible = false
          }
        //   this.getList()
        })
    },
    handleRemove(file, fileList) {
      this.pic = []
      console.log(fileList)
      fileList.forEach(item => {
        this.pic.push(item.response.content.filePath)
      })
    },
    success(response, file, fileList) {
      console.log(file)
      this.pic.push(file.response.content.filePath)
    //   this.form.pictureUrl = file.response.content.filePath
    },
    handlePreview(file) {
      console.log(file)
    },
    // 分页
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    // 获取数据
    async getList() {
      const page = this.page
      const pageSize = 10
      const res = await this.$api.order.getOrder({ userId: this.userInfo.id, page: page, pageSize: pageSize })
      console.log(res)
      this.tableData = res.data.content.list
      this.tableData.forEach((item, index) => {
        item.context = JSON.parse(item.context)
      })
      this.total = parseInt(res.data.content.total)
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    //   this.total_price = 0
    //   this.multipleSelection.forEach(element => {
    //     this.total_price += (element.goodsDetail.price * element.goodsDetail.num)
    //   })
    },
    // 删除订单
    del(item) {
      console.log(item)
      this.$api.order.deleteOrder(item.id)
        .then(res => {
          console.log(res)
          if (res.data.state === 200) {
            this.$message.success('删除成功')
            this.getList()
          }
        })
    },
    // 查看商品信息
    async lookDetail(item) {
      console.log(item)
      const { data } = await this.$api.order.selectOne(item.id)
      const goodsDetail = data
      //   console.log(goodsDetail)
      goodsDetail.pictureUrl = JSON.parse(goodsDetail.pictureUrl)
      console.log(goodsDetail)
      this.$router.push({
        path: '/goodsDetail',
        query: { // 路由传参时push和query搭配使用 ，作用时传递参数
          goodsDetail: JSON.stringify(goodsDetail)
        }
      })
    },
    evaluation(item) {
      console.log(item)
      this.goodsId = item.id
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.el-container{
        width: 100%;
        height: 100%;
        min-width: 1200px;
        .el-header{
            display: flex;
            flex-direction: column;
            padding: 0;
            height: auto !important;
            min-width: 1500px;
            .top-nav-bar{
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #f1f3f6;
                color: #666e73;
                font-size: 12px;
                line-height: 40px;
                padding: 0 200px;
                .function-bar{
                    width: 40%;
                    display: flex;
                    justify-content: flex-start;
                    div{
                        margin-right: 50px;
                        span{
                            margin-right: 5px;
                        }
                    }
                }
            }
            .search-box{
              display: flex;
              align-items: center;
              padding:20px 0 20px 200px;
              .search-title{
                display: flex;
                flex-direction: column;
                color: #fd684a;
                margin-right: 50px;
                align-items: center;
                span:nth-child(1){
                  font-size: 35px;
                }
                span:nth-child(2){
                  color: #f8bcae;
                  font-size: 18px;
                }
              }
              .search{
                width: 500px;
                ::v-deep .el-input__inner{
                border-color: #fd684a !important;
                }
                ::v-deep  .el-input-group__append{
                  background-color: #fd5e40 !important;
                  color: white;
                  border-color: #fd5e40;
                }
              }
            }
        }
        .el-main{
            width: 90%;
            min-width: 1200px;
            margin:0 auto;
            .settlement{
                font-size: 12px;
                line-height: 52px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                height: 52px;
                border: 1px solid #d9d9d9;
                border-right: 0;
                .price{
                    font-size: 18px;
                    font-weight: bold;
                    display: inline-block;
                    color: #ff6a00;
                    margin: 0 5px;
                }
                .el-button{
                    height: 100%;
                    border: none;
                    background-color: #fd6b25 !important;
                    color: white;
                    border-radius: 0;
                    margin-left: 5px;
                }
            }
            .el-pagination{
                margin: 50px 0;
                width: 100%;
                text-align: center;
                padding-bottom: 10px;
            }
        }
    }
::v-deep .el-table__header{
width: 100% !important;
}
::v-deep .el-table__body{
    width: 100% !important;
}
</style>
